<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leave</title>

<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/datepicker3.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="/"><span>Motion</span>Global</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="/user/profile"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
						</ul>
					</li>
				</ul>
			</div>
							
		</div><!-- /.container-fluid -->
	</nav>
		
	<?php $this->load->view("/widgets/left_nav");?>
		
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">		
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Sick Leave</li>
			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">Sick Leave Information</h1>
			</div>
		</div><!--/.row-->
									
		
		
		<div class="row">
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">Basic Table</div>
					<div class="panel-body">
						<table class="table">
						    <thead id ="table_content">
						    <tr>
						        <th data-align="right">Leave ID</th>
						        <th >Apply Time</th>
						        <th >Start Time</th>
						        <th >End Time</th>
						        <th >Time Length</th>
						        <th >State</th>
						        <th >View</th>
						        <th >Cancel</th>
						    </tr>
						    <?php foreach($leave_data as $data) { ?>
						    <tr>
						    	<th><?php echo $data['auto_id'];?></th>
						    	<th><?php echo $data['create_time'];?></th>
						    	<th><?php echo $data['start_time'];?></th>
						    	<th><?php echo $data['end_time'];?></th>
						    	<th><?php echo $data['time_length'];?></th>
						    	<th><?php echo $data['state'];?></th>
						    	<th><?php echo "<button class='btn btn-success' onclick='view_detail(".$data['auto_id'].")'>view</button>";?></th>
						    	<th><button class="btn btn-danger" onclick="cancel(<?php echo $data['auto_id'];?>)">cancel</button></th>
						    </tr>
						    <?php } ?>
						    </thead>
						</table>
						<button class="btn btn-primary btn-lg" onclick="location.href='sick_leave/new'">Add New Sick Leave Apply</button>
					</div>
				</div>


			</div>
			
			<div class="col-md-4">
			
				<div class="panel panel-red">
					<div class="panel-heading dark-overlay"><span class="glyphicon glyphicon-calendar"></span>Calendar</div>
					<div class="panel-body">
						<div id="calendar"></div>
					</div>
				</div>
				
				
								
			</div><!--/.col-->
		</div><!--/.row-->
	</div>	<!--/.main-->
		  

	<script src="/assets/js/jquery-1.11.1.min.js"></script>
	<script src="/assets/js/bootstrap.min.js"></script>
	<script src="/assets/js/chart.min.js"></script>
	<script src="/assets/js/easypiechart.js"></script>
	<script src="/assets/js/easypiechart-data.js"></script>
	<script src="/assets/js/bootstrap-datepicker.js"></script>
	<script>
		$('#calendar').datepicker({
		});

		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})


		
		function do_it()
		{
			$("#table_content").empty();
			$("#table_content").append("<tr><th data-align='right'>Leave ID</th><th >Apply Time</th><th >Start Time</th><th >End Time</th><th >Time Length</th><th >State</th><th>View</th><th>Assure</th></tr>");
			$.post("/api/sick/month",
			{
				date : $(".datepicker-switch").first().text()
			},
			function(data,status)
			{
				json1 = eval("("+data+")");
				for(i=0 ;i<json1.length;i++)
				{
					$("#table_content").append("<tr><th>"+json1[i].auto_id+"</th><th>"+json1[i].create_time+"</th><th>"+json1[i].start_time+"</th><th>"+json1[i].end_time+"</th><th>"+json1[i].time_length+"</th><th>"+json1[i].state+"</th><th><button class='btn btn-success' onclick='view_detail("+json1[i].auto_id+")'>view</button></th><th><button class='btn btn-danger' onclick='submit("+json1[i].auto_id+")'>submit</button></th></tr>");
				}
			});
		}

		function setVal()
		{
			setTimeout("do_it()","100");	
		}

		function view_detail(id)
		{
			location.href = "/sick_leave/detail/"+id;
		}
		
		function cancel(id)
		{
			if(confirm("Are you sure to cancel Sick Leave Apply?"))
			{
				$.post("/leave/cancel",
				{
					id : id,
					leave_type : "sick_leave"
				},
				function(data,status)
				{
					json1 = eval("("+data+")");
					if(json1.code == "200")
					{
						alert("Your Leave Sick Apply has been Cancelld");
						location.href="/sick_leave";
					}
					else
					{
						alert(json1.text);
					}
				});
			}
			
		}
	</script>	
</body>

</html>
